<template>
  <div class="cj_start">
    <!-- 启动页图片 -->
    <div class="cj_start_top">
      <!-- 商店 -->
      <div class="cj_start_p1">青云小筑</div>
      <!-- p文字 -->
      <div class="cj_start_p2">让您更省心 旅游更自由</div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 启动页按钮 -->
    <div class="cj_start_bottom">
      <p @click="router.push('/login')">开始使用</p>
    </div>

    <!-- 定时器三秒自动跳过 -->
    <div class="cj_settimes" @click="router.push('/login')">{{ countdown }} 秒</div>
  </div>
</template>

<script setup lang="ts">
// 引入图片
const images = [
  'https://img1.baidu.com/it/u=2278720247,3134855918&fm=253&fmt=auto&app=138&f=JPEG?w=1199&h=800',
  'https://img0.baidu.com/it/u=2009916719,118103642&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
  'https://p6.itc.cn/images01/20210918/fc1ee88d7cae4228938c8664f3178244.jpeg'
]
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

// 获取路由实例
const route = useRoute()
const router = useRouter()

// 倒计时时间
const countdown = ref(6)

// 定时器 ID
let timerId

// 启动定时器
const startTimer = () => {
  timerId = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else {
      // 清除定时器
      clearInterval(timerId)
      // 跳转到目标页面
      router.push('/login')
    }
  }, 1000)
}

// 组件挂载时启动定时器
onMounted(() => {
  startTimer()
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timerId) {
    clearInterval(timerId)
  }
})
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.cj_start {
  width: 100vw;
  height: 100vh;
  /* background: palegreen; */
  position: relative;
}

.cj_start_top {
  width: 100vw;
  height: 500px;
  /* background: paleturquoise; */
  overflow: hidden;
}

.cj_start_bottom {
  width: 95vw;
  height: 60px;
  background: #00be8c;
  margin-top: 120px;

  overflow: hidden;
  margin-left: 10px;
  border-radius: 20px;
}

.cj_start_top img {
  width: 100%;
  /* height: 100px; */
}

.cj_start_p1 {
  width: 100%;
  height: 60px;
  /* background: pink; */
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
  color: #00be8c;
}

.cj_start_p2 {
  width: 100%;
  height: 70px;
  /* background: red; */
  /* margin-top: 30px; */
  color: #9a949f;
  text-align: center;
}

.cj_start_bottom p {
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 18px;
}

.cj_settimes {
  width: 70px;
  height: 30px;
  background: #f4f4f4;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 20px;
  right: 15px;
}
img {
  width: 500px;
  height: 300px;
}
</style>